<template>
  <div class="groupChart">
    <div class="content-big">
      <ul class="chartTablist">
        <li :class="chartActive==0?`active`:``" @click="getActive(0)">当前群里（1）</li>
        <li :class="chartActive==1?`active`:``" @click="getActive(1)">已退出群聊（1）</li>
      </ul>
      <div class="content-tabel">
        <el-table
          :data="tableDataList"
          ref="groupChart"
        >
          <el-table-column
            :label="item.label"
            align="center"
            v-for="(item, index) in tableColumns"
            :key="index"
            :prop="item.key"
            :min-width="item.minWidth ? item.minWidth : ``"
            :fixed="item.fixed ? item.fixed : false"
            :show-overflow-tooltip="true"
          >
            <!--用于表格自定义-->
            <template slot-scope="scope">
              <div v-if="item.key=='name'">
                <div class="userInfo">
                  <img src="../../../assets/images/profile.jpg"/>
                  <div class="name">小城红</div>
                  <div class="label">@志新</div>
                </div>
              </div>
              <div v-else style="text-align: center">{{ scope.row[item.key] }}</div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {listUser, delUser,} from "@/api/system/user";

export default {
  name: "groupChart",
  components: {},
  data() {
    return {
      tableHeight: 600,
      chartActive: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableColumns: [
        {key: 'name', label: `群名`, visible: true, minWidth: 150, fixed: true},
        {key: 'mobile', label: `群主`, visible: true, minWidth: 150, fixed: false},
        {key: 'email', label: `在群企业号`, visible: true, minWidth: 200},
        {key: 'last_login_time', label: `入群时间`, visible: true, minWidth: 200},
      ],
      tableDataList: [],
      total: 8, // 表格的总条数
    };
  },
  created() {
    this.getList();
    this.tableDataList = [];
    for (let i = 0; i < 10; i++) {
      let obj = {
        name: '小红',
        mobile: '18207418337',
        email: '2572513931@qq.com',
        last_login_time: '锐行科技',
      }
      this.tableDataList.push(obj);
    }
  },
  methods: {
    getActive(index) {
      this.chartActive = index;
    },
    showLabel() {
      this.showSelectLabelPage = true;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.handleQuery();
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  //background: #fff;
}


.content-big {
  margin: 12px;
  height: calc(100vh - 180px);
  overflow-y: auto;

  .el-form {
    padding: 10px;
    background: #fff;
    border-radius: 8px;

    .el-form-item {
      margin-bottom: 10px;

      .right-big {
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        padding-left: 11px;

        > span {
          color: #777;
          width: 89px;
          display: inline-block;
          white-space: nowrap;
        }

        .el-select {
          width: 138px;

          ::v-deep .el-input__inner {
            border: none;
          }
        }

        .el-input {
          width: 138px;

          ::v-deep .el-input__inner {
            border: none;
          }
        }

        ::v-deep .el-date-editor {
          border: none;
        }
      }

    }
  }

  .content-tabel {
    background: #fff;
    margin-top: 10px;

    .content-head {
      height: 60px;
      display: flex;
      justify-content: space-between;
      padding: 16px;

      .content-left {
        display: flex;
        align-items: center;

        .left-number {
          font-size: 12px;
          color: rgba(0, 0, 0, .45);
          margin-left: 10px;
        }

        .group-btn {

        }
      }

      .content-right {
        display: flex;
        align-items: center;

        .example {
          font-size: 14px;
          display: flex;
          align-items: center;
          margin-right: 20px;

          .el-switch {
            margin-right: 10px;
            margin-left: 5px;
          }
        }
      }
    }

    .el-table {
      margin-bottom: 20px;
    }
  }

  .pagination-container {
    height: 60px;
  }
}

.userInfo {
  border-radius: 4px;
  margin: 8px 0;
  cursor: pointer;
  position: relative;
  padding-left: 50px;
  font-size: 14px;
  list-style: none;
  text-align: left;
  line-height: 18px;

  img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    left: 0px;
    top: 0px;
    position: absolute;
  }

  .name {

  }

  .label {
    margin-top: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f90;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.chartTablist {
  display: flex;
  margin-top: 10px;

  li {
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    border: 1px solid #ddd;
    justify-items: center;
    font-size: 14px;
    cursor: pointer;

    &.active {
      color: #3070ff;
      background: #fff;
      border-color: #3070ff;
    }
  }
}
</style>
